﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
	Layout = null;
	ViewData["Title"] = "人才登记";
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>人才登记</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
	<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="layui-card" style="margin:20px;">
	<div class="layui-card-header">
		<div class="layui-row">
			<div class="layui-col-md6">
				<h2>人才登记</h2>
			</div>
			<div class="layui-col-md6" style="text-align: right;">
				<button class="layui-btn layui-btn-danger" id="btnBatchDelete">
					<i class="layui-icon">&#xe640;</i> 批量删除
				</button>
				<button class="layui-btn" id="btnAdd">
					<i class="layui-icon">&#xe654;</i> 新增人才
				</button>
			</div>
		</div>
	</div>
	<div class="layui-card-body">
		<!-- 搜索栏 -->
		<form class="layui-form layui-form-pane" lay-filter="searchForm">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">员工编码</label>
					<div class="layui-input-inline">
						<input type="text" name="EmployeeCode" placeholder="请输入员工编码" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">员工姓名</label>
					<div class="layui-input-inline">
						<input type="text" name="EmployeeName" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">学历</label>
					<div class="layui-input-inline">
						<select name="EducationBackground">
							<option value="">请选择学历</option>
							<option value="高中">高中</option>
							<option value="大专">大专</option>
							<option value="本科">本科</option>
							<option value="硕士">硕士</option>
							<option value="博士">博士</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select name="Status">
							<option value="">请选择状态</option>
							<option value="1">备选</option>
							<option value="2">面试</option>
							<option value="3">入职通过</option>
							<option value="4">入职失败</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn" lay-submit lay-filter="searchBtn">
						<i class="layui-icon">&#xe615;</i> 搜索
					</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<!-- 数据表格 -->
		<table id="talentTable" lay-filter="talentTable"></table>
	</div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="tableBar">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 状态显示模板 -->
<script type="text/html" id="statusTpl">
	{{#  if(d.status === 1){ }}
		<span class="layui-badge layui-bg-blue">备选</span>
	{{#  } else if(d.status === 2){ }}
		<span class="layui-badge layui-bg-orange">面试</span>
	{{#  } else if(d.status === 3){ }}
		<span class="layui-badge layui-bg-green">入职通过</span>
	{{#  } else if(d.status === 4){ }}
		<span class="layui-badge layui-bg-red">入职失败</span>
	{{#  } }}
</script>

<!-- 新增/编辑表单 -->
<script type="text/html" id="talentForm">
	<form class="layui-form" style="padding: 10px;" lay-filter="talentForm">
		<input type="hidden" name="id">
		<div class="layui-form-item">
			<label class="layui-form-label" style="width:100px">员工编码</label>
			<div class="layui-input-block">
				<input type="text" name="employeeCode" required lay-verify="required" placeholder="请输入员工编码" autocomplete="off" class="layui-input" readonly>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"  style="width:100px">员工姓名</label>
			<div class="layui-input-block">
				<input type="text" name="employeeName" required lay-verify="required" placeholder="请输入员工姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"  style="width:100px">联系电话</label>
			<div class="layui-input-block">
				<input type="text" name="phone" required lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
			<div class="layui-input-block">
				<input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">性别</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="1" title="男" checked>
				<input type="radio" name="sex" value="2" title="女">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">学历</label>
			<div class="layui-input-block">
				<select name="educationBackground" required lay-verify="required">
					<option value="">请选择学历</option>
					<option value="高中">高中</option>
					<option value="大专">大专</option>
					<option value="本科">本科</option>
					<option value="硕士">硕士</option>
					<option value="博士">博士</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"  style="width:100px">婚姻状况</label>
			<div class="layui-input-block">
				<select name="marriage" required lay-verify="required">
					<option value="">请选择婚姻状况</option>
					<option value="未婚">未婚</option>
					<option value="已婚">已婚</option>
					<option value="离异">离异</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<select name="status" required lay-verify="required">
					<option value="">请选择状态</option>
					<option value="1">备选</option>
					<option value="2">面试</option>
					<option value="3">入职通过</option>
					<option value="4">入职失败</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"  style="width:100px">出生年月</label>
			<div class="layui-input-block">
				<input type="text" name="birthday" id="birthday" required lay-verify="required" placeholder="请选择出生年月" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"  style="width:100px">政治面貌</label>
			<div class="layui-input-block">
				<select name="politicsStatus" required lay-verify="required">
					<option value="">请选择政治面貌</option>
					<option value="群众">群众</option>
					<option value="共青团员">共青团员</option>
					<option value="中共党员">中共党员</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="submitForm">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</script>

<script>
	layui.use(['table', 'form', 'layer', 'laydate'], function () {
		var table = layui.table;
		var form = layui.form;
		var layer = layui.layer;
		var laydate = layui.laydate;
		var $ = layui.$;

		// 初始化日期选择器
		laydate.render({
			elem: '#birthday',
			type: 'date'
		});

		// 初始化表格
		table.render({
			elem: '#talentTable',
			url: '/TalentRegistration/ShowHumanResources',
			page: true,
			where: {}, // 初始无条件
			request: {
				pageName: 'PageIndex', // 页码的参数名称，默认：page
				limitName: 'PageCount'  // 每页数据量的参数名，默认：limit
			},
			cols: [[
				{type:'checkbox'},
				{field: 'id', title: 'ID', width: 80, sort: true},
				{field: 'employeeCode', title: '员工编码', width: 120},
				{field: 'employeeName', title: '员工姓名', width: 120},
				{field: 'phone', title: '联系电话', width: 120},
				{field: 'email', title: '邮箱', width: 180},
				{field: 'sex', title: '性别', width: 80, templet: function(d){
					return d.sex === 1 ? '男' : '女';
				}},
				{field: 'educationBackground', title: '学历', width: 100},
				{field: 'marriage', title: '婚姻状况', width: 100},
				{field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
				{field: 'birthday', title: '出生年月', width: 120},
				{field: 'politicsStatus', title: '政治面貌', width: 100},
				{title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right'}
			]]
		});

		// 搜索按钮点击事件
		form.on('submit(searchBtn)', function(data){
			table.reload('talentTable', {
				where: data.field
			});
			return false;
		});

		// 新增按钮点击事件
		$('#btnAdd').on('click', function(){
			// 生成9位随机数字
			var randomCode = Math.floor(100000000 + Math.random() * 900000000).toString();

			layer.open({
				type: 1,
				title: '新增人才',
				area: ['600px', '800px'],
				content: $('#talentForm').html(),
				success: function(layero, index){
					// 设置表单值
					layui.form.val('talentForm', {
						id: null,
						employeeCode: randomCode,
						employeeName: '',
						phone: '',
						email: '',
						sex: 1,
						educationBackground: '',
						marriage: '',
						status: '',
						birthday: '',
						politicsStatus: '',
					});

					// 确保员工编码显示在输入框中
					$(layero).find('input[name="employeeCode"]').val(randomCode);

					layui.form.render();
					laydate.render({
						elem: '#birthday',
						type: 'date'
					});
				}
			});
		});

		// 批量删除按钮点击事件
		$('#btnBatchDelete').on('click', function(){
			var checkStatus = table.checkStatus('talentTable');
			var data = checkStatus.data;
			
			if(data.length === 0){
				layer.msg('请至少选择一条数据', {icon: 0});
				return;
			}
			
			layer.confirm('确定要删除选中的' + data.length + '条数据吗？', {
				icon: 3,
				title: '提示'
			}, function(index){
				var ids = data.map(function(item){
					return item.id;
				});
				
				$.ajax({
					url: '/TalentRegistration/DelMany',
					type: 'POST',
					contentType: 'application/json',
					data: JSON.stringify(ids),
					success: function(res){
						layer.msg('删除成功', {icon: 1});
						table.reload('talentTable');
					},
					error: function(){
						layer.msg('删除失败', {icon: 2});
					}
				});
				
				layer.close(index);
			});
		});

		// 表格工具条事件
		table.on('tool(talentTable)', function(obj){
			var data = obj.data;
			if(obj.event === 'del'){
				layer.confirm('确定删除此人才信息？', function(index){
					$.ajax({
						url: '/HumanResources/DeleteHuman',
						type: 'DELETE',
						data: { humanId: data.id },
						success: function(res){
								layer.msg('删除成功');
								obj.del();
						}
					});
					layer.close(index);
				});
			} else if(obj.event === 'edit'){
				layer.open({
					type: 1,
					title: '编辑人才信息',
					area: ['600px', '800px'],
					content: $('#talentForm').html(),
					success: function(){
						// Layui form.val() 自动填充表单
						form.val('talentForm', data);

						// 调试：打印数据，检查字段名和值是否正确
						console.log('编辑弹框数据：', data);

						// 确保性别单选框回显
						$('input[name="sex"][value="' + data.sex + '"]').prop('checked', true);

						// 确保日期回显
						if (data.birthday) {
							// 假设后端返回的日期格式是 ISO 8601 (YYYY-MM-DDTHH:MM:SS) 或 YYYY-MM-DD
							// 截取日期部分，以防带有时分秒
							var dateValue = data.birthday.split('T')[0];
							laydate.render({
								elem: '#birthday',
								type: 'date',
								value: dateValue
							});
						} else {
							// 如果没有生日数据，仍然初始化日期选择器
							laydate.render({
								elem: '#birthday',
								type: 'date'
							});
						}
						layui.form.render(); // 重新渲染表单元素，特别是select和radio
					}
				});
			}
		});

		// 表单提交事件
		form.on('submit(submitForm)', function(data){
			var url = data.field.id ? '/TalentRegistration/UpdateHuman' : '/TalentRegistration/AddHuman';
			var method = data.field.id ? 'PUT' : 'POST';

			// 确保新增时id为0，避免类型转换错误
			if (data.field.id === '') {
				data.field.id = 0;
			}

			// 将所有字段名从 camelCase 转换为 PascalCase 以匹配后端DTO
			var submitData = {};
			for (var key in data.field) {
				if (data.field.hasOwnProperty(key)) {
					var pascalKey = key.charAt(0).toUpperCase() + key.slice(1);
					submitData[pascalKey] = data.field[key];
				}
			}

			// 特殊处理日期格式，Layui日期选择器返回的是YYYY-MM-DD格式，后端可能需要DateTime格式
			if (submitData.Birthday && submitData.Birthday !== '') {
				submitData.Birthday = new Date(submitData.Birthday).toISOString();
			} else {
				submitData.Birthday = null;
			}

			$.ajax({
				url: url,
				type: method,
				contentType: 'application/json',
				data: JSON.stringify(submitData),
				success: function(res){
						layer.closeAll();
						layer.msg('保存成功');
						table.reload('talentTable');
				}
			});
			return false;
		});
	});
</script>

</body>
</html>













